<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>@yield('page-title')</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ asset('assets/demoyy/css/lib/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/demoyy/css/base.css') }}">
</head>

<body class="home-template">

<!-- 基本导航条 -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="sr-only">DemoYY Blog</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
            <a href="{{ url('/') }}" class="navbar-brand">DemoYY</a>
        </div>
        <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="{{ url('/') }}">Home</a></li>
                <li><a href="##">Node</a></li>
                <li><a href="##">Archive</a></li>
                <li><a href="##">About</a></li>
                <li><a href="##">Feedback</a></li>
            </ul>
        </div>
    </div>
</div>
<!--END NAVBAR-->

@yield('page-content')

<div class="col-sm-12 col-md-3">
    <div class="widget widget-search">
        <div class="widget-title">
            <h4><span class="glyphicon glyphicon-search"></span> 搜索文章</h4>
        </div>
        <div class="widget-content">
            <form class="form" role="form" action="{{ url('/search/keyword') }}">
                <div class="form-group">
                    <label class="sr-only" for="keywords">输入关键字</label>
                    <input type="text" name="keyword" class="form-control" id="keyword" placeholder="请输入搜索关键字">
                </div>
            </form>
        </div>
    </div>
    <div class="widget widget-recent-post">
        <div class="widget-title">
            <h4><!-- span class="glyphicon glyphicon-heart"></span --> 随机推荐</h4>
        </div>
        <div class="widget-content">
            <ul class="list-unstyled">
                @foreach($random as $article)
                <li><a href="{{ url('/posts', ['id' => $article->post_id]) }}"><span class="glyphicon glyphicon-chevron-right"></span> {{ $article->post_title }}</a></li>
                @endforeach
            </ul>
        </div>
    </div>
    <div class="widget widget-recent-comment">
        <div class="widget-title">
            <h4><!-- span class="glyphicon glyphicon-list-alt"></span --> 最新评论</h4>
        </div>
        <div class="widget-content">
            <ul class="list-unstyled">
                @foreach($comments as $comment)
                <li><a href="{{ url('/posts', ['id' => $comment->post_id]) }}#comment-{{ $comment->comment_id }}"><span class="glyphicon glyphicon-chevron-right"></span> {{ substr($comment->comment_content, 0, 20) }}</a></li>
                @endforeach
            </ul>
        </div>
    </div>
</div>

</div>
<!-- End row -->

</div>
<!-- End container -->

<div class="padder footer">
    Copyright © 2015 • DemoYY Blog • Laravel5
</div>
<a href="javascript:;" class="cd-top">Top</a>

<!--代码-->
<script src="{{ asset('assets/demoyy/js/lib/jquery-1.11.3.js') }}"></script>
<script src="{{ asset('assets/demoyy/js/lib/bootstrap.js') }}"></script>
<link rel="stylesheet" href="{{ asset('assets/demoyy/js/code-prettify/atelier-savanna-dark.css') }}">
<script src="{{ asset('assets/demoyy/js/code-prettify/prettify.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/demoyy/js/base.js') }}" type="text/javascript"></script>
{{--<link rel="stylesheet" href="{{ asset('/assets/demoyy/js/highlight/styles/solarized_dark.css') }}">--}}
{{--<script src="{{ asset('/assets/demoyy/js/highlight/highlight.pack.js') }}"></script>--}}
<script>
    /*
     * For bootstrap carousel
     */
    $('.carousel').carousel();

    /*
     * For google-code-pretty
     * Not Good for PHP Syntax
     */
    $(window).load(function() {
        $("pre").addClass("prettyprint linenums lang-php");
        prettyPrint();
    });

    /*
     * For highlight.js
     * Not Support for LineNums
     */
    // with js
//    window.onload = function() {
//        var aCodes = document.getElementsByTagName('pre');
//        for (var i=0; i < aCodes.length; i++) {
//            hljs.highlightBlock(aCodes[i]);
//        }
//    };
    // with jquery
//    $("pre").each(function (i, e) {
//        hljs.highlightBlock(e);
//    });
//    hljs.configure({
//        tabReplace: '    ',  // 4 spaces
////        classPrefix: 'hljs-',     // don't append class prefix
//        languages: ['php']
//                             // … other options aren't changed
//    })
////    hljs.initHighlighting();
//    hljs.initHighlightingOnLoad();
</script>
</body>
</html>